﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script src="../../Scripts/lib/jquery.json.min.js" type="text/javascript"></script>

    <script src="../../Scripts/Lib/jquery.bindTools.js" type="text/javascript"></script>

    <link href="../sample.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" language="javascript">
        var data =
    {
        "sex": "female",
        "name": "leo",
        "heigh": 150,
        "sex": "male",
        "birthday": "1999-01-31T16:00:00.000Z",
        "favorite": ["football", "unknow"],
        "address": {
            "conuntry": "China",
            "address": "60 ed road, zhuhai,guangdong"
        }
    }


        $(document).ready(function() {
            $("#demo1").bindTool({
                way: [
                    {
                        member: "birthday",
                        to: function(val, ctrl) {
                            var d = new Date(val);
                            var newDate = d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
                            $(ctrl).val(newDate);
                        }
                    },
                    {
                        member: "heigh",
                        from: function(jObj, ctrl) {
                            var val = $(ctrl).val();
                            return val > 10 ? val / 100 : val;
                        }
                    },
                    {
                        member: "address.address", to: false
                    },
                    {
                        member: "address.conuntry", from: false
                    }
                ]
            });
            $("#demo1").bindTool('bind', data);
            $("#getJsonObject").click(function() {

                var jsion = $("#demo1").bindTool("collect");
                alert($.toJSON(jsion));
            });

        });
    </script>

    <style type="text/css">
        #data
        {
            width: 368px;
        }
    </style>
</head>
<body>
    <div id="demo1" style="float: left; width: 464px">
        <p>
            <input type="button" id="getJsonObject" value="Get Json" />
            <input type="button" id="bindButton" value="Bind" /></p>
        <p>
            <label for="name">
                Name:</label>
            <input name="name" type="text" />
        </p>
        <p>
            <label>
                Birthday:</label>
            <input name="birthday" type="text" />
        </p>
        <p>
            <label>
                Sex:</label>
            <div>
                <input name="sex" value="male" checked="checked" type="radio" /><label>male</label>
                <input name="sex" value="female" type="radio" /><label>female</label>
            </div>
        </p>
        <p>
            Hieght<label for="heigh">:</label>
            <input name="heigh" type="text" />CM / M
        </p>
        <p>
            Favorite :
            <input name="favorite" value="basketball" type="checkbox" checked="checked" /><label>BasketBall</label>
            <input name="favorite" value="football" type="checkbox" checked="checked" /><label>Football</label>
            <input name="favorite" value="unknow" type="checkbox" /><label>Regist for fun</label>
        </p>
        <fieldset>
            <legend>Address information:</legend>
            <p>
                Country:
                <select name="address.conuntry">
                    <option value="America">America</option>
                    <option value="Britain">Britain</option>
                    <option value="China">China</option>
                    <option value="Japan">Japan</option>
                </select>
            </p>
            <p>
                Address:
                <textarea name="address.address" cols="30" rows="10">here set to=false, so only read from here,but do not write any data.</textarea>
            </p>
        </fieldset>
    </div>
    <div style="width: 378px">
        &nbsp;
    </div>
</body>
</html>
